<template>
  <div class="watefallBox">
    <div
      class="page-loadmore-wrapper"
      style='height: 100%;width: 100%'
    >
      <mt-loadmore
        v-if="raindropItem.list && raindropItem.list.length > 0"
        :auto-fill=false
        @translate-change="translateChange"
        :bottom-method="loadBottom"
        @bottom-status-change="handleBottomChange"
        ref="loadmore">
        <div class="waterfall">
          <div
            v-for="(item,index) in pic"
            :key='index'
            class="picItem"
            :style="{backgroundImage:`url(${item.pics[0]})`}"
          >
          </div>
        </div>
      </mt-loadmore>
      <div class="waterfall" v-if="raindropItem.list && raindropItem.list.length === 0">
        <no-content/>
      </div>
      <div class="boxWrap">
        <div class="headerLeftTop">{{raindropItem.tag_name}}</div>
        <div class="headerCenter">
          <div class="comment">
            {{raindropItem.comment_num}}
          </div>
          <div class="catch">
            {{raindropItem.catch_num}}
          </div>
        </div>
        <div class="headerBottom">
          {{raindropItem.introduction}}
        </div>

        <div class="addRaindrop add"
             v-if="isSelf"
             @click="_handleCatch"
        >
          <el-upload
            class='input-file'
            action="http://dev.upload.famlink.co/upload/fileUpload/oss"
            list-type="picture-card"
            name="ico_upload"
            :before-upload="beforeAvatarUpload"
            :limit=1
            :on-error='_handleUploadFail'
            :on-progress='_handleUploadProg'
            :on-success="_handleUploadSuccess"
            :data='upData'>
          </el-upload>
        </div>
        <div class="addRaindrop"
             v-if="!isSelf"
             @click="_handleCatch"
             :class="isCatch ? 'catch':'noCatch'"
        >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import NoContent from '../../components/common/NoContent'
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'
  import { formatDate } from '../../plugins/utils'
  import CalcuMD5 from '../../plugins/md5'

  const Cookie = process.browser ? require('js-cookie') : undefined

  export default {
    components: { NoContent },
    data() {
      return {
        uid: this.$route.params.uid,
        bottomStatus: '',
        wrapperHeight: 0,
        translate: 0,
        isSelf: false,
        catch: this.raindropItem.is_catch,
        file: '',
        upData: {
          cid: 'paramida-debug-system_djy',
          os: 'IOS-9.3.2',
          network: 1,
          appkey: 'com.raindrop.link',
          appv: '1.1.0-dev',
          sdkv: '1.1.0',
          country: '1.0.0',
          lang: 'zh-CN',
          time: (new Date()).valueOf(),
          local_time: formatDate(new Date().getTime()),
          req_id: Math.random() + (new Date()).valueOf(),
          resolution: '',
          manufacturer: '',
          channel: 'test',
          timezone: -8
        }
      }
    },
    props: {
      raindropItem: {
        type: Object || Array,
        default() {
          return []
        }
      }
    },
    computed: {
      pic() {
        return this.raindropItem.list
      },
      picList: {
        get: function() {
          return this.pic
        },
        set: function(type) {
          this.pic.unshift(type)
          // const currPic = this.pic
          // currPic.unshift(type)
          // this.catch = type
        }
      },
      isCatch: {
        get: function() {
          return this.catch ? true : false
        },
        set: function(type) {
          this.catch = type
        }
      }
    },
    created() {
      this._renderIsSelf()
    },
    mounted() {

    },
    methods: {
      //上传头像之前签名
      beforeAvatarUpload(file) {
        const isLt10M = file.size / 1024 / 1024 < 10
        if (!isLt10M) {
          Toast('Picture size should not exceed 10Mb!')
          return
        }
        const sign = CalcuMD5('http://dev.upload.famlink.co/upload/fileUpload/oss', this.upData, 'post')
        this.upData.sign = sign
      },

      //上传成功的回调
      _handleUploadSuccess(res) {
        const imgUrl = res.data.url
        this._setTopic(imgUrl)

        const currData = {
          pics: [imgUrl]
        }
        this.picList = currData
      },

      //上传进度
      _handleUploadProg(eve) {
        console.log(eve.percent)
      },

      //上传失败的回调
      _handleUploadFail() {
        Toast({
          message: 'Upload failure!',
          iconClass: 'icon icon-error'
        })
      },
      //上传更新帖子
      async _setTopic(imgUrl) {
        console.log(this.pic)
        const params = {
          sid: Cookie.get('sid'),
          pics: `["${imgUrl}"]`,
          tag_id: this.raindropItem.tag_id,
          type: 0,
          is_custom: 0,
          scene: 'iQj6xGgCRIvKzVyV9NsEaHsZleXif/9b'
        }
        const res = await api.setTopic(params)
        console.log(res)
        if (res.status == 0) {

        } else {
          Toast(res.info)
        }
      },

      //catch 或者 上传图片
      async _handleCatch() {
        if (!this.isSelf) {
          this.isCatch = !this.isCatch
          // this.test = !this.test
          console.log(this.test)
          const params = {
            sid: Cookie.get('sid'),
            user_id: this.uid,
            tag_id: this.raindropItem.tag_id,
            is_catch: this.isCatch ? 1 : 0
          }
          const res = await api.setCatchUser(params)
          // console.log(res)
          if (res.status == 0) {
            this.discover = res.data
          } else {
            Toast(res.info)
          }
        } else {
          // this._setTopic()
        }

      },

      //判断是否是自己 因为nuxt服务端渲染不能使用Cookie
      _renderIsSelf() {
        this.isSelf = (this.$route.params.uid == Cookie.get('user'))
      },
      //上拉状态
      handleBottomChange(status) {
        this.bottomStatus = status
      },

      //上拉加载
      loadBottom() {
        this.$refs.loadmore.onBottomLoaded()

      },
      translateChange(translate) {
        console.log(translate)
      }
    }

  }
</script>
<style scoped lang="scss">
  div {
    height: auto;
    width: fit-content;
  }

  .watefallBox {
    width: 100%;
    position: relative;

    .waterfall {
      width: 100%;
      height: 100%;
      padding: 0 20px 276px 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .picItem {
        width: 346px;
        min-height: 346px;
        border-radius: 30px;
        background: url("") no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
        margin-bottom: 16px;
      }
    }

    .boxWrap {
      position: absolute;
      bottom: 0;
      left: 0;
      background: #ffffff;
      width: 750px;
      height: 276px;
      box-shadow: 0px 0px 22px 0px rgba(95, 100, 106, 0.1);
      border-radius: 40px 40px 0px 0px;
      padding: 30px;
      color: #5F646A;

      .headerLeftTop {
        color: #333333;
        line-height: 48px;
        font-weight: 600;
        font-size: 40px;
      }

      .headerCenter {
        height: 26px;
        font-size: 24px;
        line-height: 24px;
        padding: 24px 0;
        display: flex;

        div {
          position: relative;
          padding-left: 24px;
          margin-right: 34px;

          &:after {
            position: absolute;
            content: '';
            width: 20px;
            height: 20px;
            left: 0;
            top: 4px;
            background: url("") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;
          }
        }

        .comment {
          &:after {
            background-image: url("../../assets/images/4.png");
          }
        }

        .catch {
          &:after {
            background-image: url("../../assets/images/9.png");
          }
        }
      }

      .headerBottom {
        margin-top: 24px;
        height: 80px;
        line-height: 40px;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .addRaindrop {
        position: absolute;
        top: -54px;
        right: 60px;
        width: 112px;
        height: 112px;
        border-radius: 50%;
        background: url(" ") no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;

        &.add {
          background-image: url('../../assets/images/12.png');

          .input-file {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
          }
        }

        &.catch {
          background-image: url('../../assets/images/14.png');
        }

        &.noCatch {
          background-image: url('../../assets/images/15.png');
        }
      }
    }
  }
</style>
